<template>
   <el-card class="w-full pt-[5px] text-right backdrop-opacity-0 bg-transparent">
    <el-button type="primary" @click="handerBack" class=" text-xs">
      <el-image style="width: 20px; margin-right: 10px;" :src="backImgUrl" />
      <span>返回</span>
    </el-button>
  </el-card>

  <el-card class="w-full pt-[5px]">    
    <div class="font-bold block-title">
     个人信息填报字段
    </div>
    <el-divider class="mt-2"/>
    <el-form :model="pForm" class="mt-[20px]" label-width="96px" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="姓名：" class="mb-[0px]"  prop="name">
            <el-input
              v-model="pForm.number"
              placeholder=""
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-form-item label="科研单位：" class="mb-[0px]"  prop="unit">
            <el-input
              v-model="pForm.number"
              placeholder=""
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </el-card>

  <el-card class="w-full pt-[5px] mt-[10px]">    
    <div class="font-bold block-title">
     科技项目
     <span class="des-title ">（有效时间：2024-06-09~2025-07-09   计算规则：求和  单位：分）</span>
    </div>
    <el-divider class="mt-2"/>
    <el-table :data="tableData" class="w-full" stripe row-key="id">
      <!-- <el-table-column type="selection" width="55" /> -->
      <!-- <el-table-column type="index" width="50" label="序号" /> -->
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="khRule" label="模块内计算规则" />
      <el-table-column prop="isRepeat" label="是否允许重复" />
      <el-table-column prop="standard" label="考核标准" >
        <template #default="{ row }">
          <el-button type="primary" link size="small" plain @click="handler(row)">
            {{ row.standard }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="des" label="备注" />
    </el-table>
  </el-card>

  <el-card class="w-full pt-[5px] mt-[10px]">    
    <div class="font-bold block-title">
      学术著作
     <span class="des-title ">（有效时间：2024-06-09~2025-07-09   计算规则：求和  单位：分）</span>
    </div>
    <el-divider class="mt-2"/>
    <el-table :data="tableData2" class="w-full" stripe row-key="id">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="khRule" label="模块内计算规则" />
      <el-table-column prop="isRepeat" label="是否允许重复" />
      <el-table-column prop="standard" label="考核标准" >
        <template #default="{ row }">
          <el-button type="primary" link size="small" plain @click="handler(row)">
            {{ row.standard }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="des" label="备注" />
    </el-table>
  </el-card>

  <AddModel v-model="addModelVisible" />
</template>

<script setup>
// import { reactive, ref } from 'vue'

import { getToken } from "@/utils/auth";
import useAppStore from '@/store/modules/app'
import usePagination from "@/hooks/pagination";
import useOperate from "@/hooks/operate";
import backImgUrl from '@/assets/icons/arrowBack.png';
import AddModel from "./components/AddMd.vue";

const router = useRouter();
const appStore = useAppStore()
const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

const addModelVisible = ref(false);
const pForm = ref({
  name: "",
  unit: ""
});
const rules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  unit: [
    {
      required: true,
      message: '请输入科研单位',
      trigger: 'blur',
    },
  ]
})

const { pagination, currentChange, sizeChange } = usePagination();
const { handleDelete } = useOperate();
pagination.total = 100;
const tableData = ref([
  {
    name: "一类纵向科技项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "二类纵向科技项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "三类纵向科技项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "横向科技项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "纵向合作项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "校内项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
]);

const tableData2 = ref([
  {
    name: "一类横向科技项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "一类纵向科技项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  },
  {
    name: "校内项目",
    khRule  : "求和",
    isRepeat: "允许",
    standard: "考核标准",
    des: "成都大学为第一单位",
  }
  ]);
//点击编辑
const handler = (row, index=1) => {
  console.log(row)
  router.push("/examine/khfazb/"+ index)
};
const handerBack = () => {
  router.replace("/examine")
};

</script>

<style scoped lang="scss">
.block-title{
  color: #454545;
  border-left: 7px solid #409EFF;
  padding-left: 12px;
  height: 36px;
  display: block;
  line-height: 36px;
  .des-title{
    font-size: 14px;
    font-weight: 400;
    color: #b4b6bb;
  }
}
</style>

